<template>
  <a-modal v-model="visible" title="" @ok="handleOk" @cancel="handleCancel">
    <a-form-model ref="converEditForm" :model="model">
      <a-form-model-item label="" ref="content" prop="content">
        <j-code-editor language="json" v-model="model.content" :fullScreen="true" style="min-height: 100px"></j-code-editor>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import JCodeEditor from '@/components/jeecg/JCodeEditor.vue'
import pick from 'lodash.pick'
export default {
  components: { JCodeEditor },
  data() {
    return {
      visible: false,
      model: {
        content: '',
        key: ''
      }
    }
  },
  methods: {
    setEditer(key, value) {
      let scope = this
      this.$nextTick(function() {
        scope.model.key = key
        scope.model.content = value
        // scope.$set(scope.model, 'content', value)
        scope.visible = true
      })
    },
    handleOk() {
      let scope = this
      this.visible = false
      this.$emit('ok', this.model.key, this.model.content)
      this.$nextTick(function() {
        scope.model.content = ''
        scope.$set(scope.model, 'content', '')
      })
    },
    handleCancel() {
      let scope = this
      this.$emit('close')
      this.$nextTick(function() {
        scope.model.content = ''
        scope.$set(scope.model, 'content', '')
      })
      this.visible = false
    }
  }
}
</script>
